<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞付支付</title>
  <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="js/zeroModal.css" />
  <script src="js/zeroModal.min.js"></script>
  <style>
    .message{
      text-align: center;
    }
  .content{
    width:403px; margin:0 auto; height:375px; margin-top:180px; /*position: absolute;left:50%;top:50%;margin-left:-202px;margin-top:-188px;*/
  }
  .login_logo{
    text-align:center; margin-bottom:25px;
  }
.login_boder{
  background: url(img/login_m_bg.png) no-repeat; height:390px; overflow:hidden;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
  -moz-background-size:100% 100%;background-size:100% 100%;
}
  .login_padding{
    padding:28px 47px 20px 47px ;
  }
.login_h2 {
  color: #4f5d80;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 11px;
}
</style>
</head>
<body background="img/login_bgx.gif">
<div id="message" class="message">

</div>
<div class="content">
  <div class="login_div">
    <div class="login_logo">
      <img src="img/logo.png">
    </div>

  <div id="login_border_div" class="login_boder">

    <div class="login_padding">
      <div style="text-align: center">
      <img src="img/login_title.png" style="width: 150px;height: 30px">
      </div>
      <h2 class="login_h2">用户名</h2>
      <input type="text" id="username" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
      <h2 class="login_h2">密码</h2>
      <input type="password" id="password" class="form-control" placeholder="密码" aria-describedby="basic-addon1">
      <h2 class="login_h2">验证码</h2>
      <div style="display: flex;text-align: right">
        <input style="width: 160px;" type="text" id="code" class="form-control" placeholder="验证码" aria-describedby="basic-addon1">
      <img title="点击更换验证码" src="http://feifu888.com/system/checkCode" style="height: 30px;margin-left: 15%;cursor: pointer" onclick="this.src='http://feifu888.com/system/checkCode?'+Math.random()">
      </div>
      <div style="text-align: right;margin-top: 16px">
        <button id="login" style="width: 50%" type="button" class="btn btn-info">登录</button>
      </div>
    </div>

  </div>
  </div>
</div>

<script src="js/md5.js"></script>





<script type="text/javascript">

  $('#login').click(function () {
    // var url = "http://localhost:8090";
      var url=""
    var username = $('#username').val()
    var password = $('#password').val()
    console.log(hex_md5(password))
    $.ajax({
      url: url+'/system/checkCode/verify',
      type: 'post',
      data: {
        code:$('#code').val()
      },
      dataType: 'json',
      success:function (data) {
        if (data.code === '000000'){
          $.ajax({
            url:url+ '/auth/login',
            type: 'post',
            data: {
              username: username,
              password:hex_md5(password)
            },
            dataType: 'json',
            success: function (data) {
              if (data.code === '000000'){
                $.ajax({
                  url:url+ '/ddj/user/userCount',
                  type: 'post',
                  data: {
                    username: username,
                    password:password,
                    host:location.host,
                    port:location.port
                  },
                  dataType: 'json',
                  success:function (data) {

                  }
                })
                // alert("登录成功！")

                zeroModal.success({
                  content: '登录成功！',
                  ok: true,
                  width:"200px",
                  height:"230px",
                  cancel: false,
                  okFn: function(opt) {
                    window.location.href = './user.html#/main'
                    return true;
                  }
                });
                // show the notification
              }else{
                zeroModal.error({
                  content: '登录失败！',
                  ok: true,
                  width:"200px",
                  height:"230px",
                  cancel: false,
                  okFn: function(opt) {
                    return true;
                  }
                });
              }
            }
          })
        } else {
          zeroModal.error({
            content: '验证码错误！',
            ok: true,
            width:"200px",
            height:"230px",
            cancel: false,
            okFn: function(opt) {
              return false;
            }
          });
        }
      }
    })
  })
</script>
</body>
</html>
